<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>lxx's face</title>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
			<div class="face">

			<div class="hair"></div>
			<div class="hair"></div>
			
			<div class="meimaos">
				<div class="meimao"></div>
				<div class="meimao"></div>
			</div>
			<div class="eyes">
			<div class="eye"></div>
			<div class="eye"></div>
			</div>
		</div>
		<script type="text/javascript">
			// document.querySelector('body')
			// .addEventListener('mousemove',eyeball);
			// function eyeball(){
			// 	var eye=document.querySelectorAll('.eye');
			// 	eye.forEach(function(eye){
			// 		let x=(eye.getBoundingClientrect().left)+(eye.clientWidth/2);
			// 		let y=(eye.getBoundingClientrect().top)+(eye.clientHeight/2);
			// 		let radian=Math.atan2(event.pageX-x,event.pageY-y);
			// 		let rot=(radian*(180/Math.PI)*-1)+270;
			// 		eye.style.transform="rotate("+rot+"deg)";
			// 	})
			// }
			      document.querySelector("body").addEventListener("mousemove", eyeball);
			      function eyeball() {
			        var eye = document.querySelectorAll(".eye");
			        eye.forEach(function(eye) {
			          let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
			          let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;
			          let radian = Math.atan2(event.pageX - x, event.pageY - y);
			          let rot = radian * (180 / Math.PI) * -1 + 270;
			          eye.style.transform = "rotate(" + rot + "deg)";
			        });
			      }
		</script>
	</body>
</html>
